<style type="text/css">
/*current day background*/
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
.ui-dialog{ z-index:3000;}
.ui-dialog .ui-widget-header{background-color:#489be7; color:#fff; padding:6px; cursor:move; height:40px}
.ui-dialog .ui-dialog-titlebar-close{ float:right}
ui-dialog,ui-widget,ui-widget-content,ui-corner-all,ui-front,ui-draggable,ui-resizable{height:40px !important}

#dialog-form,#dialog-form2{
	background:#fff
}
.ui-dialog-titlebar-close{
	height:30px;
	width:30px;
	margin:0; padding:0; list-style-type:none;
	background:no-repeat url('__PUBLIC__/Images/X.png');
		
}
.ui-dialog-buttonset{text-align:right;}
.ui-dialog-buttonset button{ margin-right:10px;}
.meeting_room_data td{ margin:0; padding:0}
.meeting_room_data .choosed{width:50%; height:34px; background:#aaa; float:left;}
.meeting_room_data .choose{width:50%; height:34px; background:#489be7; float:left;}
.meeting_room_data .free{width:50%; height:34px; border:1px solid #489be7; float:left;}
</style>
<include file='Admin/Tpl/Public/se7en_header.html' />
  <body style="padding-top:10px">
    <div class="modal-shiftfix">
      <!-- Navigation -->
      
      <!-- End Navigation -->
      <div class="container-fluid main-content">
        <div class="page-title">
        </div>
        <div class="row">
          <div class="col-md-9">
            <div class="widget-container fluid-height clearfix">
              <div class="widget-content padded">
                <div id="calendar"></div>
              </div>
            </div>
          </div>
          <div class="col-md-3 visible-md visible-lg">
            <div class="widget-container fluid-height">
              <div class="widget-content padded">
                <div id="external-events">
                  <form action="__URL__/create_meeting" method="post">
                    <input class="input form-control" id="meeting_title" name="meeting_title" placeholder="会议主题..." type="text" value="">
                    <input class="form-control" id="meeting_position" name="meeting_position" placeholder="选择会议室..." type="text" >
                    <input type="hidden" name="meeting_room_id" />
                    <input class="form-control" id="meeting_date" name="meeting_date" placeholder="开始日期..." type="text" value="">                    
                    <input class="form-control" id="meeting_start_time" name="meeting_start_time" placeholder="开始时间..." type="text" />
                    <input class="form-control" id="meeting_end_time" name="meeting_end_time" placeholder="结束时间..." type="text" />
                    <select class="select2able chosen_select" name="meeting_type" data-placeholder="Select Label..." id="event_priority">
                        <option value="0">普通会议</option>
                        <option value="1">周会</option>
                        <option value="2">月会</option>
                    </select>
                    <select class="select2able" name="meeting_category" data-placeholder="Select Label..." id="event_priority">
                        <volist name="meeting_category" id="val">
                        <option value="{$val.category_id}">{$val.category_name}</option>
                        </volist>
                    </select>
                    <input class="input form-control" type="text" placeholder="选择参会人..." name="meeting_join" />
                    <input class="input form-control" type="text" placeholder="添加密送..." name="meeting_i_join" />
		    <div class="space12"></div>
                    <input type="submit" class="btn btn-default" value="发起会议" />
                    <!--<Br/>
                    <input type="button" class="btn btn-default" value="选择参会人测试按钮" name="choose_meeting_join" />
                  --></form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<div id="dialog-form" title="选择一个会议室" style="overflow:auto !important; border:1px solid #489be7 !important">
  <form>
    <fieldset>
        <div style="padding:12px 6px 6px 6px;">
            <div class="col-md-2">
                <select class="form-control">
                    <option value="Category 1">会议室</option>
                </select>
            </div>
            <div class="col-md-3">
              <div class="input-group date datepicker">
                <input class="form-control datepicker" id="meeting_roomschedule_date" value="<php>echo date('m/d/Y')</php>" type="text"><span class="input-group-addon"><i class="icon-calendar"></i></span>
              </div>
            </div>
            <div class="col-md-2">
                <select class="form-control">
                    <option value="Category 1">时长</option>
                </select>
            </div>
            <div style="float:right;">
                <select class="form-control" id="meeting_floor" style="width:80px; float:right; margin-right:10px;">
                    <option value="Category 1">楼号</option>
                </select>
                <select class="form-control" id="meeting_building" style="width:80px; float:right; margin-right:10px;">
                    <option value="Category 1">楼层</option>
                </select>
                <select class="form-control" id="meeting_local" style="width:80px; float:right; margin-right:10px;">
                    <volist name='rs.local' id='val'>
                        <option value="{$val.local_id}">{$val.local_name}</option>
                    </volist>
                </select>
            </div>
            <div class="clear"></div>
            <hr />
            <div id="meeting_room_state"></div>
        </div>
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<div id="dialog-form2" title="选择参会人" style="overflow:auto !important; border:1px solid #489be7 !important">
  <form>
    <fieldset>
    	<php>foreach($rs['audience_list'] as $key=>$val){</php>
            <div class="form-group" style="margin-top:30px">
                <div class="col-md-2">
                    <label class="checkbox">
                        <input type="checkbox" name="choose_all" data-key="<php>echo $key</php>" value="1" /><span><php>echo $key</php></span>
                    </label>
                </div>
            </div>
            <div class="clear"></div>
            <div class="form-group">
                <div class="col-md-12 left">
                    <php>foreach($val as $val1){</php>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="choose_audience" data-key="<php>echo $key</php>" value="{$val1.audience_id}"><span>{$val1.audience_name}</span>
                        </label>
                    <php>}</php>
                </div>
            </div>
            <div class="clear"></div>
            <hr />
        <php>}</php>
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<script type='text/javascript'>
$(document).ready(function () {
	var room_id = 0;
	var start_time = -1;
	var end_time = -1;
	var center_time = -1;
	var index=0;
	
    date = new Date();
    d = date.getDate();
    m = date.getMonth();
    y = date.getFullYear();
	
    initDrag = function(el) {
      /*
      # create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
      # it doesn't need to have a start or end
      */
      var eventObject;
      eventObject = {
        title: $.trim(el.text())
      };
      /*
      # store the Event Object in the DOM element so we can get to it later
      */

      el.data("eventObject", eventObject);
      /*
      # make the event draggable using jQuery UI
      */
      return el.draggable({
        zIndex: 999,
        revert: true,
        revertDuration: 0
      });
    };
    addEvent = function(title, priority) {
      var html;
      title = (title.length === 0 ? "Untitled Event" : title);
      priority = (priority.length === 0 ? "default" : priority);
      html = $("<div data-class=\"label label-" + priority + "\" class=\"external-event label label-" + priority + "\">" + title + "</div>");
      jQuery("#event_box").append(html);
      return initDrag(html);
    };
    $("#external-events div.external-event").each(function() {
      return initDrag($(this));
    });
    $("#event_add").click(function() {
      var priority, title;
      title = $("#event_title").val();
      priority = $("#event_priority").val();
      return addEvent(title, priority);
    });

    handleDropdown = function() {
      $("#event_priority_chzn .chzn-search").hide();
      $("#event_priority_chzn_o_1").html("<span class=\"label label-default\">" + $("#event_priority_chzn_o_1").text() + "</span>");
      $("#event_priority_chzn_o_2").html("<span class=\"label label-success\">" + $("#event_priority_chzn_o_2").text() + "</span>");
      $("#event_priority_chzn_o_3").html("<span class=\"label label-info\">" + $("#event_priority_chzn_o_3").text() + "</span>");
      $("#event_priority_chzn_o_4").html("<span class=\"label label-warning\">" + $("#event_priority_chzn_o_4").text() + "</span>");
      return $("#event_priority_chzn_o_5").html("<span class=\"label label-important\">" + $("#event_priority_chzn_o_5").text() + "</span>");
    };
    $("#event_priority_chzn").click(handleDropdown);
    /*
    # predefined events
    */

    addEvent("My Event 1", "primary");
    addEvent("My Event 2", "success");
    addEvent("My Event 3", "info");
    addEvent("My Event 4", "warning");
    addEvent("My Event 5", "danger");
    addEvent("My Event 6", "default");
    $("#calendar").fullCalendar({
      header: {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay"
      },
	 /* contentHeight:664,*/
	  monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
	  monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
	  dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
	  dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
	  today: ["今天"],
	  firstDay: 1,
	  allDaySlot:false,
	  buttonText: {today: '本月',month: '月',week: '周',day: '日',prev: 'Prev',next: 'Next'},
      editable: false, //判断日程是否可以拖动
      droppable: true,
	  minTime:'8:00',
	  maxTime:'20:00',
	  dayClick:function(date,allDay, jsEvent, view){
		  var selectdate = $.fullCalendar.formatDate(date, "MM/dd/yyyy");
		  $("#calendar").fullCalendar('changeView','agendaDay' );
		  var year  = Number(selectdate.substr(6,4));
		  var month = Number(selectdate.substr(0,2)) - 1;
		  var day   = Number(selectdate.substr(3,2));
		  //$("#calendar").fullCalendar( 'gotoDate',date);
		  $("#calendar").fullCalendar( 'gotoDate',year,month,day);
		  $('#meeting_date').val(selectdate);
	  },
      drop: function(date, allDay) {
        var copiedEventObject, originalEventObject;
        originalEventObject = $(this).data("eventObject");
        copiedEventObject = $.extend({}, originalEventObject);
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;
        copiedEventObject.className = $(this).attr("data-class");
        $("#calendar").fullCalendar("renderEvent", copiedEventObject, true);
        if ($("#drop-remove").is(":checked")) {
          return $(this).remove();
        }
      },
	  
/*
 *events
 *className:"label label-[success,info,warning]"
 *start && end:new Date('2014-11-26 14:56');
 *title:"All Day Event"
 *allDay:[false,true]
 ******************************************************/
 		events: {$rs.meeting_list},
    });
	//dialog
	var dialog, form;
	
	function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function meeting_schedule_room() {
		$.ajax({
			type:'post',
			data:{
				floor_id:$("#meeting_floor").val(),
							
			},
			dataType:"json",
			url:"__URL__/get_meeting_building",
			success: function(data){
				var $html='';
				var $data = data.building_list;
				for(var i in $data){
					$html+='<option value="'+ $data[i].building_id +'">'+ $data[i].building_name +'</option>';
				}
				$("#meeting_building").html($html);
				$("#meeting_building").change();
			}
		});
    }
	
    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 500,
      width: 960,
	  zIndex:3000
    });
/**********************弹窗form提交***********************/	
    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });
	
/**********************弹窗***********************/	
	function open_dialog(){
		dialog.dialog( "open" );
	}
    $( "#meeting_position" ).click(function(){
		open_dialog();
	});
	$( "#meeting_date" ).click(function(){
		open_dialog();
	});
	$( "#meeting_start_time" ).click(function(){
		open_dialog();
	});
	$( "#meeting_end_time" ).click(function(){
		open_dialog();
	});
/**********************日期控件同步***********************/	
	$("#meeting_date").change(function(){
		$("#meeting_roomschedule_date").val($("#meeting_date").val());
	});
/**********************地点三级联动***********************/	
	$("#meeting_local").change(function(){
		$.ajax({
			type:'post',
			data:{local_id:$("#meeting_local").val()},
			dataType:"json",
			url:"__URL__/get_meeting_building",
			success: function(data){
				var $html='';
				var $data = data.building_list;
				for(var i in $data){
					$html+='<option value="'+ $data[i].building_id +'">'+ $data[i].building_name +'</option>';
				}
				$("#meeting_building").html($html);
				$("#meeting_building").change();
			}
		});
	});
	$("#meeting_building").change(function(){
		$.ajax({
			type:'post',
			data:{building_id:$("#meeting_building").val()},
			dataType:"json",
			url:"__URL__/get_meeting_floor",
			success: function(data){
				var $html='';
				var $data = data.floor_list;
				for(var i in $data){
					$html+='<option value="'+ $data[i].floor_id +'">'+ $data[i].floor_name +'</option>';
				}
				$("#meeting_floor").html($html);
				$("#meeting_floor").change();
			}
		});
	});
/**********************当前时间变化 筛选会议室***********************/	
	$("#meeting_roomschedule_date").change(function(){
		if($("#meeting_floor").val()!='')
			$("#meeting_floor").change();	
	});
/**********************当前楼层变化 筛选会议室***********************/	
	$("#meeting_floor").change(function(){
		$.ajax({
			type:'post',
			data:{
				floor_id:$("#meeting_floor").val(),
				meeting_date:$("#meeting_roomschedule_date").val(),
			},
			dataType:"json",
			url:"__URL__/get_meeting_room",
			success: function(data){
				var $html='';
				var $data=data;
				var $schedule_states;
				if(data==null){
					$('#meeting_room_state').html('当前楼层没有会议室');
				}else{
					for(var $i=0;$i<$data.length;$i++){
						if( $data[$i].have_schedule==1 ){
							$schedule_states = $data[$i].schedule_states[0];
							$html+='<p><h4>';
							$html+=$data[$i].local_name;
							$html+=$data[$i].building_name;
							$html+=$data[$i].floor_name;
							$html+=$data[$i].room_name;
							$html+='</h4><table width="100%" border="1" bordercolor="#aaa" style=" border-collapse:collapse"><tr><td>8:00-9:00</td><td>9:00-10:00</td><td>10:00-11:00</td><td>11:00-12:00</td><td>12:00-13:00</td><td>13:00-14:00</td><td>14:00-15:00</td><td>15:00-16:00</td><td>16:00-17:00</td><td>17:00-18:00</td><td>18:00-19:00</td><td>19:00-20:00</td></tr><tr class="meeting_room_data">';
							for(var $j=0;$j<=23;$j++){
								if( $j%2 == 0 )
									$html+='<td><div class="';
								else
									$html+='<div class="';
								if( $schedule_states['schedule_'+$j] == 1)
									$html+='choosed">&nbsp;<input data-room_id="'+$data[$i].room_id+'" type="checkbox" value="0" name="meeting_schedule_'+$j+'" /></div>';
								else
									$html+='free">&nbsp;<input data-room_id="'+$data[$i].room_id+'" type="checkbox" value="0" name="meeting_schedule_'+$j+'" /></div>';
								if($j%2 == 1)
									$html_='</td>';
							}	
							$html+='</tr></table></p>';
						}else{
							$html+='<p><h4>';
							$html+=$data[$i].local_name;
							$html+=$data[$i].building_name;
							$html+=$data[$i].floor_name;
							$html+=$data[$i].room_name;
							$html+='(最大空闲时长:12小时)';
							$html+='</h4><table width="100%" border="1" bordercolor="#aaa" style=" border-collapse:collapse"><tr><td>8:00-9:00</td><td>9:00-10:00</td><td>10:00-11:00</td><td>11:00-12:00</td><td>12:00-13:00</td><td>13:00-14:00</td><td>14:00-15:00</td><td>15:00-16:00</td><td>16:00-17:00</td><td>17:00-18:00</td><td>18:00-19:00</td><td>19:00-20:00</td></tr><tr class="meeting_room_data">';
							for(var $j=0;$j<=23;$j++){
								if( $j%2 == 0 )
									$html+='<td><div class="';
								else
									$html+='<div class="';
								$html+='free">&nbsp;<input data-room_id="'+$data[$i].room_id+'" data-rname="'+$data[$i].room_name+'" type="checkbox" value="0" name="meeting_schedule_'+$j+'" /></div>';
								if($j%2 == 1)
									$html_='</td>';
							}	
							$html+='</tr></table></p>';
						}
					}
					$('#meeting_room_state').html($html);
										
					$("#meeting_room_state div").click(function(){
						//空闲时可选
						if($(this).attr('class')=='free'){
							$(this).attr('class','choose');
							$(this).children('input').val(1);
							//判断room_id是选择一样的
							if( room_id == 0 || room_id == $(this).children('input').attr('data-room_id') ){
								room_id = $(this).children('input').attr('data-room_id');
								index=$(this).children('input').attr('name').lastIndexOf('_')+1;								
								//实现多选框
								if(start_time==-1){
									start_time = Number($(this).children('input').attr('name').substr(index));
								}else{
									center_time = Number($(this).children('input').attr('name').substr(index));
									//这里清醒了再做
									if( start_time > center_time ){
										end_time   = start_time;
										start_time = center_time;
									}else if( start_time < center_time ){
										end_time = center_time;
									}
									$("#meeting_room_state div").each(function(index, element) {
										if($(this).children('input').attr('data-room_id')==room_id && $(this).attr('class')=='choose'){
											$(this).attr('class','free');
											$(this).children('input').val(0);
										}
									});
									var array = [];
									for(var $i=start_time;$i<=end_time;$i++){
										array.push('meeting_schedule_'+$i);		
									}
									$("#meeting_room_state div").each(function(index, element) {
										if($(this).children('input').attr('data-room_id')==room_id && $(this).attr('class')=='free'){
											if($.inArray($(this).children('input').attr('name'),array) >= 0){
												$(this).attr('class','choose');
												$(this).children('input').val(1);
											}
										}
									});
								}
									
							}else if( room_id != $(this).children('input').attr('data-room_id') ){
								//选择了新的room_id
								$("#meeting_room_state div").each(function(index, element) {
                                    if($(this).children('input').attr('data-room_id')==room_id && $(this).attr('class')=='choose'){
										$(this).attr('class','free');
										$(this).children('input').val(0);
									}
                                });
								//重置room_id
								room_id = $(this).children('input').attr('data-room_id');
								//重置 start_time
								start_time = $(this).children('input').attr('name').substr(index);
								//重置 end_time
								end_time = -1;
							}
							
							
						//空闲时取消
						}else if($(this).attr('class')=='choose'){
							$(this).attr('class','free');
							$(this).children('input').val(0);
							
							index=$(this).children('input').attr('name').lastIndexOf('_')+1;
							center_time = Number($(this).children('input').attr('name').substr(index));
							//这里清醒了再做
							if( start_time != center_time ){
								if(end_time == center_time){
									end_time = end_time-1;
								}else if(end_time > center_time){
									end_time=center_time;
								}
							}else if( start_time == center_time ){
								start_time = center_time + 1;
							}
							$("#meeting_room_state div").each(function(index, element) {
								if($(this).attr('class')=='choose'){
									$(this).attr('class','free');
									$(this).children('input').val(0);
								}
							});
							var array = [];
							for(var $i=start_time;$i<=end_time;$i++){
								array.push('meeting_schedule_'+$i);		
							}
							$("#meeting_room_state div").each(function(index, element) {
								if($(this).children('input').attr('data-room_id')==room_id && $(this).attr('class')=='free'){
									if($.inArray($(this).children('input').attr('name'),array) >= 0){
										$(this).attr('class','choose');
										$(this).children('input').val(1);
									}
								}
							});
						}
						
						var c = '';
						var d = '';
						start_time>end_time ? end_time=start_time : end_time = end_time ;
						switch(start_time){
							case 0:c='08:00';break;
							case 1:c='08:30';break;
							case 2:c='09:00';break;
							case 3:c='09:30';break;
							case 4:c='10:00';break;
							case 5:c='10:30';break;
							case 6:c='11:00';break;
							case 7:c='11:30';break;
							case 8:c='12:00';break;
							case 9:c='12:30';break;
							case 10:c='13:00';break;
							case 11:c='13:30';break;
							case 12:c='14:00';break;
							case 13:c='14:30';break;
							case 14:c='15:00';break;
							case 15:c='15:30';break;
							case 16:c='16:00';break;
							case 17:c='16:30';break;
							case 18:c='17:00';break;
							case 19:c='17:30';break;
							case 20:c='18:00';break;
							case 21:c='18:30';break;
							case 22:c='19:00';break;
							case 23:c='19:30';break;
						}
						switch(end_time){
							case -1:d='08:30';break;
							case 1:d='09:00';break;
							case 2:d='09:30';break;
							case 3:d='10:00';break;
							case 4:d='10:30';break;
							case 5:d='11:00';break;
							case 6:d='11:30';break;
							case 7:d='12:00';break;
							case 8:d='12:30';break;
							case 9:d='13:00';break;
							case 10:d='13:30';break;
							case 11:d='14:00';break;
							case 12:d='14:30';break;
							case 13:d='15:00';break;
							case 14:d='15:30';break;
							case 15:d='16:00';break;
							case 16:d='16:30';break;
							case 17:d='17:00';break;
							case 18:d='17:30';break;
							case 19:d='18:00';break;
							case 20:d='18:30';break;
							case 21:d='19:00';break;
							case 22:d='19:30';break;
							case 23:d='20:00';break;
						}
						$("#meeting_start_time").val(c);
						$("#meeting_end_time").val(d);
						$("#meeting_date").val($("#meeting_roomschedule_date").val());
						$('[name="meeting_room_id"]').val($(this).children('input').attr('data-room_id'));
						$("#meeting_position").val($(this).parent().parent().parent().parent().prev('h4').text());
					});
					
				}
			}
		});	
	});
	$("#meeting_local").change();
/**********************地点三级联动 END***********************/
/**********************选择参会人 START************************/
	var dialog2 = $( "#dialog-form2" ).dialog({
		autoOpen: false,
		height: 500,
		width: 960,
		zIndex:3001,
		close:choose_this_audience
	});
	function choose_this_audience(){
		var str = '';
		$('input[name="choose_audience"]:checked').each(function(index, element) {
           str +=","+$(this).val();
        });
		$('input[name="meeting_join"]').val(str.substring(1));	
	}
	
	$("input[name=meeting_join]").click(function(){
		dialog2.dialog( "open" );
	});
	 var dialog3 = $( "#dialog-form2" ).dialog({
                autoOpen: false,
                height: 500,
                width: 960,
                zIndex:3001,
                close:choose_this_audience
        });


	$("input[name=meeting_i_join]").click(function(){
                dialog3.dialog( "open" );
        });
	
	var selfval = '';
	$("input[name='choose_all']").each(function(index, element) {
        $(this).bind('click',function(){
			selfval = $(this).attr('data-key');
			if(this.checked){
				$("input[name='choose_audience']").each(function(index, element) {
				   if($(this).attr('data-key') == selfval)
						$(this).attr('checked',true);
				});
			}else{
				$("input[name='choose_audience']").each(function(index, element) {
				   if($(this).attr('data-key') == selfval)
						$(this).attr('checked',false);
				});
			}
		});
    });
/**********************选择参会人 END************************/

});
</script>
